<template>
	<view>
		<nav-bar backState="2000" fontColor="#FFF" bgColor="#007aff" :titleCenter="true" title="我的">
			<view class="pr30" slot="right">
				<uni-icons type="person-filled" size="30" color="#fff"></uni-icons>
			</view>
		</nav-bar>
		<uni-section title="卡片样式" type="line">
			<uni-card :is-shadow="true" margin="0 20rpx" padding="10rpx">
				<text class="uni-body">这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。</text>
			</uni-card>
		</uni-section>
		<uni-section title="时间格式化" type="line">
			<uni-card :is-shadow="false" :border="false" margin="0 20rpx" padding="0">
				<uni-dateformat date="2020/10/20 20:20:20" format="yyyy-MM-dd"></uni-dateformat>
			</uni-card>
		</uni-section>
		<uni-section class="mb-10" title="表单" type="line">
			<uni-card :is-shadow="false" :border="false" margin="0 20rpx" padding="0">
				<uni-forms ref="form" :modelValue="formData" :rules="rules">
					<uni-forms-item label="姓名" name="name">
						<input type="text" v-model="formData.name" placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item label="邮箱" name="email">
						<input class="align-r" v-model="formData.email" type="text" placeholder="请输入用户名"
							@input="binddata('email', $event.detail.value)" />
					</uni-forms-item>
					<uni-forms-item label="数字输入框">
						<uni-number-box class="around-end" :value="1.0" :step="0.5" :min="2" :max="9" />
					</uni-forms-item>
				</uni-forms>
			</uni-card>
			<button type="primary" class="mt20 mr30 ml30" @click="submit">
				提交
			</button>
		</uni-section>
		<button type="primary" class="mt20 mr30 ml30" @click="open">
			打开弹窗
		</button>
		<uni-popup ref="popup" type="bottom">底部弹出 Popup</uni-popup>
		<button type="primary" class="mt20 mr30 ml30" @click="openPage('/pages/signature/signature')">
			签名
		</button>
		<button type="primary" class="mt20 mr30 ml30" @click="getPosition">
			地图
		</button>
	</view>
</template>
<script>
	import {
		getUserInfo
	} from '@/api/index.js'

	export default {
		data() {
			return {
				// 表单数据
				formData: {
					name: "LiMing",
					email: "dclouddclouddclouddclouddclouddcloud@email.com",
				},
				rules: {
					// 对name字段进行必填验证
					name: {
						rules: [{
								required: true,
								errorMessage: "请输入姓名",
							},
							{
								minLength: 3,
								maxLength: 5,
								errorMessage: "姓名长度在 {minLength} 到 {maxLength} 个字符",
							},
						],
					},
					// 对email字段进行必填验证
					email: {
						rules: [{
							format: "email",
							errorMessage: "请输入正确的邮箱地址",
						}, ],
					},
				},
			};
		},
		onLoad(){
			this.getUser()
		},
		methods: {
			getUser() {
				getUserInfo().then((res) => {
					console.log(res);
			 })
			},
			// 触发提交表单
			submit() {
				this.$refs.form
					.validate()
					.then((res) => {
						console.log("表单数据信息：", res);
					})
					.catch((err) => {
						console.log("表单错误信息：", err);
					});
			},
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open("top");
			},
			openPage(url) {
				uni.navigateTo({
					url: url
				});
			},
			getPosition() {
				uni.chooseLocation({
					// latitude:''，
					// longitude：'',
					success: (res) => {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
					}
				})
			}
		},
	};
</script>
